<script setup lang="ts">
import { registerMap } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'
import useEcharts, { type EChartsOption } from '~/composables/chart'

import type { CustomerInfo } from '../type'

import pointer from './map-pointer.png'

const props = defineProps<{
  data: CustomerInfo
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name?: string, value: [number, number], [key: string]: any }[]>([])
const option = computed<EChartsOption>(() => {
  return {
    geo: [
      {
        map: 'china',
        aspectScale: 0.9, // 长宽比
        zoom: 0.9,
        roam: false,
        itemStyle: {
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: '#09132c', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#274d68', // 100% 处的颜色
              },
            ],
            globalCoord: true, // 缺省为 false
          },
          shadowColor: 'rgba(23, 59, 97, 0.9)',
          shadowOffsetX: -3,
          shadowOffsetY: 10,
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'green',
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              opacity: 0,
              label: {
                show: false,
                color: '#009cc9',
              },
            },
          },
        ],
      },
      {
        map: 'china',
        aspectScale: 0.9, // 长宽比
        zoom: 0.9,
        roam: false,
        itemStyle: {
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: '#09132c', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#274d68', // 100% 处的颜色
              },
            ],
            globalCoord: true, // 缺省为 false
          },
          shadowColor: 'rgba(24, 88, 124, 0.9)',
          shadowOffsetX: -3,
          shadowOffsetY: 8,
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'green',
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              opacity: 0,
              label: {
                show: false,
                color: '#009cc9',
              },
            },
          },
        ],
      },
      {
        map: 'china',
        aspectScale: 0.9, // 长宽比
        zoom: 0.9,
        roam: false,
        itemStyle: {
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: '#09132c', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#274d68', // 100% 处的颜色
              },
            ],
            globalCoord: true, // 缺省为 false
          },
          shadowColor: 'rgba(31, 106, 146, 0.9)',
          shadowOffsetX: -6,
          shadowOffsetY: 6,
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'green',
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              opacity: 0,
              label: {
                show: false,
                color: '#009cc9',
              },
            },
          },
        ],
      },
      {
        map: 'china',
        aspectScale: 0.9, // 长宽比
        zoom: 0.9,
        roam: false,
        itemStyle: {
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: '#09132c', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#274d68', // 100% 处的颜色
              },
            ],
            globalCoord: true, // 缺省为 false
          },
          shadowColor: 'rgba(0, 152, 191, 0.9)',
          shadowOffsetX: -3,
          shadowOffsetY: 4,
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'green',
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              opacity: 0,
              label: {
                show: false,
                color: '#009cc9',
              },
            },
          },
        ],
      },
    ],
    series: [
      {
        type: 'map',
        map: 'china', // 使用
        zoom: 0.9,
        aspectScale: 0.9,
        roam: false,
        label: {
          show: true,
          color: '#1DE9B6',
        },
        itemStyle: {
          borderColor: 'rgb(147, 235, 248)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: '#09132c', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#274d68', // 100% 处的颜色
              },
            ],
            globalCoord: true, // 缺省为 false
          },
        },
        emphasis: {
          label: {
            color: '#000',
          },
          itemStyle: {
            areaColor: 'rgb(46,229,206, 0.9)',
            //    shadowColor: 'rgb(12,25,50)',
            borderWidth: 0.1,
          },
        },
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        zlevel: 1,
        rippleEffect: {
          color: 'rgba(249, 200, 36, 0.5)',
          period: 25,
          scale: 3,
          brushType: 'fill',
        },
        label: {
          formatter: '{b}',
          position: 'right',
          offset: [15, 0],
          color: '#1DE9B6',
          show: false,
        },
        itemStyle: {
          color: 'rgba(249, 200, 36, 0.1)',
          shadowBlur: 10,
          shadowColor: '#333',
        },
        symbolSize: 10,
        data: data.value,
        emphasis: {
          scale: true,
        },
      }, // 地图线的动画效果
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, // 箭头指向速度，值越小速度越快
          trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', // 箭头图标
          symbolSize: 5, // 图标大小
        },
        lineStyle: {
          color: 'rgba(249, 200, 36, 1)',
          width: 1, // 线条宽度
          opacity: 0.1, // 尾迹线条透明度
          curveness: 0, // 尾迹线条曲直度
        },
        data: data.value.map((v) => {
          return {
            coords: [
              [115.892151, 28.676493],
              v.value,
            ],
            lineStyle: { color: 'rgba(249, 200, 36, 1)' },
          }
        }),
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'emphasis',
        rippleEffect: {
          number: 1,
          scale: 1,
        },
        zlevel: 20,
        symbol: `image://${pointer}`,
        symbolSize: 60,
        symbolOffset: [0, -20],
        data: [{ value: [115.892151, 28.676493] }],
        label: { show: false },
      },
    ],
  }
})

async function getGeoData() {
  // const res = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
  const res = await fetch('https://api.ppmark.cn/chart-assets/asset/get/s/data-1528971808162-BkOXf61WX.json')
  const data = await res.json()
  registerMap('china', data)
  return data
}

onMounted(async () => {
  const geoJson = await getGeoData()
  const provinces = geoJson.features
  const keys = Object.keys(props.data)
  data.value = provinces.filter((v: any) => keys.includes(v.properties.name) && v.properties.cp).map((v: any) => {
    return {
      value: v.properties.cp,
    }
  })
  setOption(option.value)
})
</script>

<template>
  <div ref="chartRef" style="width:100%;height:100%" />
</template>
